<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
</head>
<body>
<div>
    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline" style="float:left;">
                    <button class="layui-btn" id="addBanner">新建Banner</button>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-row">
        <table id="banner_view" lay-filter="banner_filter">

        </table>
    </div>
</div>
</body>

<script type="text/html" id="toolOper">
    <a class="layui-btn layui-btn-xs" lay-event="updateBanner">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="updateBannerStatus">启/禁</a>
</script>
<!--车型编辑浮层-->
<form class="layui-form" id="edit_banner" action="" style="display:none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="sequence" id="sequence" autocomplete="off" placeholder="请输入序号" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="btnPicture" style="margin-left:40px;padding-left: 5px;padding-right: 5px;">商品图片上传</button>
            <br/>
            <div class="layui-row previewList" style="margin-left: 400px;margin-left: 400px;">
            </div>
            <input type="hidden" name="imagePathString" class="imagePathString"/>
        </div>
    </div>
</form>

<script>
    layui.use(['element', 'table', 'upload', 'laytpl', 'form'], function () {
        var table = layui.table;
        table.render({
            elem: '#banner_view',
            url: '/banner/getall',
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            cols: [
                [
                    {field: 'id', title: 'banner序号', width: 150},
                    {field: 'imgUrl', title: 'banner链接', width: 400},
                    {field: 'sequence', title: '排序', width: 120},
                    {field: 'createdTime', title: '创建时间', width: 120},
                    {
                        field: 'status', title: '状态', templet: function (d) {
                            if (d.status === 0) return '禁用';
                            if (d.status === 1) return '启用';
                        }
                    },
                    {field: 'right', align: 'center',width: 200, toolbar: '#toolOper'}
                ]
            ],
            response: {
                status: 'errorCode',
                countName: 'total',
                dataName: 'data'
            }
        });

        //banner 禁用
        table.on('tool(banner_filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
        if (layEvent === 'updateBannerStatus') {
            if (window.confirm('请确认是否将' + data.imgUrl  + '禁用/启用')) {
                $.ajax({
                    type: 'get',
                    data: {id: data.id, status: data.status},
                    url: '/banner/editBanner',
                    cache: false,
                    success: function (data) {
                        if (data.success == true) {
                            alert("修改banner状态成功!");
                        } else {
                            alert(data.mes);
                        }
                    }
                })
            }
            table.reload('banner_view', {
                url: '/banner/getall'
            });
        }

        });


    });
    upload.render({
        elem: '#btnPicture'
        ,url: '/upload/image',
        data:{typeId:2}
        ,before: function(obj){
            alert("蜜蜂");
        }
        ,done: function(res){
            //上传完毕
            if(res.success==true){
                var img='<div style="width:80px;float:left;display:inline-block;"><img class="layui-col-md1 src_path" style="width:80px;height:80px;" src="'+res.data+'"/>' +
                    '<p><a href="javascript:" class="delImg">删除</a></p></div>';
                $(".previewList").append(img);
                // imagePathList.push(res.data);
            }
        }
    });

    $('#addBanner').on('click',function(){
        layer.open({
            type:1,
            area:['880px','600px'],
            content:$("#edit_banner"),
            btn:['保存','取消'],
            btnALign:'c',
            yes:function(){

                if ($("#numberOfLuggage").val() == ''){
                    alert('可载行李数不允许为空');
                    return;
                }
                $.ajax({
                    type:'post',
                    data:$('#edit_banner').serialize(),
                    url:'/carModel/save',
                    cache:false,
                    dataType:'json',
                    success:function(data){
                        layer.closeAll();
                        $(".layui-laypage-btn").click()
                    }
                });
            },
        });
    });

</script>
</html>